<template>
  <Portlet>
    <el-row  v-for="(bindding, index) in fhbOrderBiddingLogs" :key="index">
      <el-col :span="4" class="text-center">
        <img class="workerImg" :src="'/api/ms-mongodb/file/download?fileId=' + bindding.businessImg" alt="师傅头像">
      </el-col>
      <el-col :span="8">
        <div class="marginBottom8">
          <p>
            {{bindding.name}}
            <el-tooltip v-if="bindding.isAuthention == 1" class="item" effect="dark" content="已通过实名认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/certification.png" alt="实名认证" title="已通过实名认证" />
            </el-tooltip>
            <el-tooltip v-if="bindding.isAuthention !== 1" class="item" effect="dark" content="未实名认证" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/Unproven.png" alt="未实名认证" title="未实名认证" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="carContent(bindding.cars, bindding.carsHold)" placement="top-start" style="margin-top: 5px">
              <img style="no-repeat: center; height: 14px; width: 20px" src="/static/images/faHuoBao/car.png" alt="车辆" :title="carContent(bindding.cars, bindding.carsHold)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="areaContent(bindding.area)" placement="top-start">
              <img style="no-repeat: center; height: 16px; width: 20px" src="/static/images/faHuoBao/warehouse.png" alt="仓库" :title="areaContent(bindding.area)" />
            </el-tooltip>
            <el-tooltip v-if="bindding.firstOrder == 1" class="item" effect="dark" content="该师傅首次接单" placement="top-start">
              <div style="display: inline-block;height: 28px; width: 35px; position:relative;top:3px">
                <i class="icon iconfont icon-shou" alt="首单" title="首单" style="color: #26c281; font-size:24px !important;"></i>
              </div>
            </el-tooltip>
          </p>
          <p>
            <span>{{bindding.nature}}</span><span v-if="bindding.address"> | {{bindding.address}} </span>
          </p>
          <p>
            <el-tooltip v-if="bindding.favorTMJD == 1" class="item" effect="dark" content="支持汪汪师傅核销" placement="right">
              <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/wangshifu.png" alt="汪师傅" title="支持汪师傅核销" />
            </el-tooltip>
            <el-tooltip v-if="bindding.favorTMJD == 1" class="item" effect="dark" content="支持喵师傅核销" placement="right">
              <img style="no-repeat: center; height: 22px; width: 46px" src="/static/images/faHuoBao/miaoshifu.png" alt="喵师傅" title="支持喵师傅核销" />
            </el-tooltip>
          </p>
          <p>
            <span>好评率：{{bindding.evalueGoods}}%</span><span style="margin-left: 20px;">总单数：{{bindding.orderSucessCount}}</span><span style="margin-left: 20px;">投诉数：{{bindding.complaintCount}}</span>
          </p>
        </div>
      </el-col>
      <el-col :span="6" class="text-center" style="min-height: 100px;">
        <div class="cell-center">
          <p><span style="font-size: 36px;" class="font-red">￥{{bindding.money}}</span></p>
          <p>
            报价：{{bindding.biddingDate|unixTimestampFilter}}
          </p>
          <span v-if="bindding.memo">留言：<truncate :value="bindding.memo" :maxLength="12"></truncate></span>
        </div>
      </el-col>
      <el-col :span="6" class="text-center" style="min-height: 100px;">
        <div class="cell-center">
          <el-button type="primary" @click="payment(bindding)">选择并支付</el-button>
        </div>
      </el-col>
    </el-row>
  </Portlet>
</template>

<script>
import {dotData, handleJsonStringArr} from '@/utils'
export default {
  name: 'offering-header',
  props: {
    orderDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  components: {
  },
  data() {
    return {
      isFhbAdminPath: -1,
      biddingId: '',
      biddingPayId: '',
      cancelId: [],
      showCancelOrder: false
    }
  },
  computed: {
    fhbOrder() {
      return dotData(this.orderDetail, 'fhbOrder') || {}
    },
    fhbOrderBiddingLogs() {
      return dotData(this.orderDetail, 'fhbOrderBiddingLogs') || []
    }
  },
  methods: {
    handleJsonStringArr,
    carContent(num, carsHold) {
      if (carsHold) {
        return '配送车辆：' + num + '辆'
      } else {
        return '配送车辆： 0 辆'
      }
    },
    areaContent(num) {
      return '仓库：' + num + '㎡'
    },
    payment(data) {
      this.$router.push({path: '/ss-fhb/myOrders/offering/payment/' + this.fhbOrder.id, query: {bid: data.id}})
    }
  }
}
</script>

<style scoped>
 .workerImg {
   no-repeat: center;
   border:1px solid grey;
   height: 102px;
   width: 102px;
   border-radius: 50% !important;
 }
</style>
